<template>
  <div class="home">
    <my-header>
      <button @click="show = !show">按钮</button>
    </my-header>
    <my-input v-model="title">
      <button @click="add(title)">添加</button>
    </my-input>
    <my-list />

    <my-mask v-model="show" position="left" :styles="{ width: '50%' }">
      <!-- v-model不是只有input才能用 v-model不管用在哪里都是：value 和 @input的简写-->
      <!-- position:是定位的位置 -->
      <!-- styles 是样式 -->
      <ul>
        <li
          :style="{ backgroundColor: $store.state.color }"
          @click="changeColor"
        >
          <!-- 改变按钮的背景颜色 -->
          切换主题
        </li>
        <li :style="{ backgroundColor: $store.state.color }">下载数据</li>
        <li :style="{ backgroundColor: $store.state.color }">导出数据</li>
      </ul>
      <!-- 弹框的内容 -->
    </my-mask>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "@/components/myHeader.vue";
import myInput from "@/components/myInput.vue";
import myList from "@/components/myList.vue";
import myMask from "@/components/myMask.vue";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      title: "",
      show: false,
    };
  },
  name: "HomeView",
  components: {
    myHeader,
    myInput,
    myList,
    myMask,
  },
  methods: {
    ...mapMutations(["add", "changeColor"]),
  },
};
</script>
